<template>
  <div class="vue-box sbot-fluid sbot">
    <div class="c-panel">
      <el-form :inline="true">
        <sa-item v-model="m.name" type="text" name="标题" br />
        <sa-item v-model="m.code" type="text" name="编码" br />
        <sa-item v-model="m.type" type="enum" jtype="3" :jv="dims.VB_TYPE" name="视图类型" br />
        <sa-item v-model="m.location" type="enum" jtype="3" :jv="dims.VB_LOCATION" name="视图位置" br />
        <sa-item v-model="m.locationIndex" type="text" name="面板序号" br />
        <sa-item name="数据标签" br>
          <template>
            <div class="vsb-panel">
              <div class="vsb-panel-tag" v-for="(item, index) in tags" :key="index">
                <el-input v-model="item.name" placeholder="请输入标签名" clearable />
                <el-select v-model="item.dataId" placeholder="请选择数据标签" clearable>
                  <el-option v-for="(k, v) in dims.STAT_OPT" :key="v" :label="k" :value="v">
                  </el-option>
                </el-select>
                <el-button type="danger" size="mini" plain icon="el-icon-minus" @click="delTags(index)" />
              </div>
              <div class="vsb-opr">
                <el-button type="primary" size="mini" plain icon="el-icon-plus" @click="addTags()" />
              </div>
            </div>
          </template>
        </sa-item>
        <sa-item v-model="m.accuracy" type="text" name="精确度" br />
        <sa-item v-model="m.delimiter" type="text" name="分隔符" br />
        <sa-item v-model="m.status" type="enum" jtype="3" :jv="dims.YES_OR_NO" name="启用状态" br />
        <sa-item v-model="m.note" type="text" name="描述" br />
        <sa-item v-model="m.sort" type="num" name="序号" br />
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vb-add',
  props: { param: Object },
  data() {
    return {
      // 超级对象
      m: this.createModel(),
      dims: this.param.dims,
      tags: []
    }
  },
  created: function () {
  },
  methods: {
    // 创建一个 默认Model
    createModel() {
      return {}
    },
    // 提交数据
    ok: function () {
      // 验证 获取 m对象
      let m = this.m;
      sa.checkNull(m.name, '请输入名字');
      sa.checkNull(m.code, '请输入编码');

      // 将panelTags转字符串
      this.m.tags = JSON.stringify(this.tags)

      // 开始增加
      sa.ajax('/vsb/add', this.m, function (res) {
        sa.alert(res.msg, function () {
          this.m = this.createModel();
          sa.closeModel();
          sa.currView().f5();
        }.bind(this));
      }.bind(this));
    },
    // 新增一条数据
    addTags() {
      this.tags.push({})
    },
    // 删除数据
    delTags(index) {
      this.tags.splice(index,1)
    }
  }
}
</script>

<style scoped>
.vsb-panel {
  display: flex;
  flex-direction: column;
  width: calc(100% - 160px);
}

.vsb-panel-tag {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
}

.vsb-panel-tag .el-input {
  width: 49%;
}

.vsb-panel-tag .el-select {
  width: 49%;
  margin: 0 5px 0 5px !important;
}

/* 禁用input的样式 */
.vsb-panel-tag .el-input.is-disabled .el-input__inner {
  color: #999;
}

.vsb-opr {
  text-align: center;
}

.vsb-opr .el-button {
  border-radius: 5px;
}
</style>
